<template>
    <section class="Card">
        <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
        <div class="service-items">
            <dl v-for="(v, k) in cardList" :key="k">
                <p>{{ v.couponCode }}</p>
                <dt>
                    <img src="../images/card.png" />
                </dt>
                <dd>
                    <p>
                        <span>{{ v.couponName }}</span>
                        <sup @click="showQrcode(true, v)">立即使用</sup>
                    </p>
                    <p>{{ v.storeName }}</p>
                </dd>
                <p>有效期：{{v.takeDate}} 至 {{v.expirationDate}}</p>
            </dl>
            <aside v-if="cardList.length < 0">暂无可用优惠券~~</aside>
            <div class="cardImg" v-if="isShow">
                <ul>
                    <li>
                        <p>卡券号：{{ currRow.couponCode }}</p>
                        <span @click="showQrcode(false)">X</span>
                    </li>
                    <li>
                        <vue-qr :text="qrcodeImgUrl" :size="200" :correctLevel="0" :margin="3"></vue-qr>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</template>

<script>
    import VueQr from "vue-qr";
    import Request from "@/api/baseRequest.js";
    import { mixin_Coupon } from "@/mixins/coupon.js";
    export default {
        name: "Card",
        props: {},
        mixins: [mixin_Coupon],
        components: {
            VueQr,
        },
        data() {
            return {
                qrcodeImgUrl: '',
                isShow: false,
                currRow: {},
                statusTimer: null
            };
        },
        mounted() {
            this.$nextTick(() => {
                this.handleCard();
            });
        },
        methods: {
            async handleCard() {
                const {id, userId} = this.$route.query
                let params = {
                    activityId: this.GetParam(window.location.href, "id") || sessionStorage['id'] || id,
                    userId: this.GetParam(window.location.href, "userId") || sessionStorage['userId'] || userId,
                };
                const { code, cardList } = await Request.listCard(params);
                if ([200, "200", "OK", 0].includes(code)) {
                    this.cardList = cardList;
                }
            },
            showQrcode(val, row) {
                const self = this;
                if (row) {
                    self.qrcodeImgUrl = 'https://shanxihongdi.com/hd-api/app/wechatQrCodeOperator/' + row.couponCode;
                    self.currRow = row;
                    this.queryCouponCodeStatus(row.couponCode);
                    console.log(self.qrcodeImgUrl);
                } else {
                    self.concel();
                }
                self.isShow = val;
            },
            concel() {
                const self = this;
                self.currRow = undefined;
                self.isShow = false;
                clearInterval(this.statusTimer);
            },
            async queryCouponCodeStatus(body) {
                const self = this;
                self.statusTimer = await setInterval(async () => {
                    let { msg, status } = await Request.getCouponCodeStatus(body);
                    if (status) {
                        this.$Alert({ title: '信息提示', message: msg });
                        self.concel();
                        self.handleCard();
                    }
                }, 2000)

            }
        },
        destroyed() {
            clearInterval(this.statusTimer);
        }
    };
</script>

<style lang="less" scoped>
    @import url("@/styles/card.less");
</style>
